<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网站标题</title>
	<!-- <link href="lib/lib/css/bootstrap.min.css" rel="stylesheet"> -->
	 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
	 <link rel="ahortcut icon" href="images/taobao.ico" type="images/x-icon">

<style type="text/css">

	div{
		background-color: pink;
	}


</style>
</head>
<body>
<br><br><br><br>


<div class="container">运用JS自适配窗口大小</div>









<script type="text/javascript">
	
	window.addEventListener("load",function(){

		//1.获取常量
		var container = document.getElementsByTagName('div')
		var kuan = 0
		resize()//定义一个函数，检测窗口的大小并自适配


		//2.监听窗口的变化
		window.addEventListener("resize",resize)

//定义一个函数，检测窗口的大小并自适配
		function resize(){
			//获取改变后的宽度
			kuan =window.innerWidth
			console.log(kuan)

			// 2-2,判断
			if( kuan >=1200){
				container.style.width = "1170px"
			}else if(kuan >=992){
				container.style.width = "970pxpx"
			}else if(kuan >=768){
				container.style.width = "750px"
			}else{
				container.style.width = "100%"
			}
		}


	})
		
</script>






<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
	
</body>
</html>